<template>
<div>
  <div class="weui-header"> 
      <div class="weui-header-left">
        <a href="javascript:void(0)" @click="goMenu()"><i class="icon-x icon-x10"></i></a>
      </div>
      <h1 class="weui-header-title">我的主页</h1>
    </div>

  <div class="myhome">

	<div class="person-info">
		<div class="float-left" style="line-height: 100px;">
			<img :src="header" class="default-head" v-if="header">
      <img src='../images/default_head.png' class="default-head" v-if="!header">
		</div>

		<div class="name-phone">
			<p>{{nickname}} <i class="sex" :class="{'man':sex==1,'woman':sex==2}"></i></p>
			<p class="col999 mt5">{{ phoneFilter(phone) }}</p>
		</div>

		<div class="goto-update">
      <router-link to="/updateInfo">
			   <span class="arrow"></span>
       </router-link>
		</div>
	</div>

  <div class="my-history top-1px-line bottom-1px-line">
    <div class="item-label" @click="label='myOrder'">
        <span>我的订单</span>
        <span :class="{'current-line':label=='myOrder'}"></span>
    </div>
    <div class="item-label" @click="label='service'">
       <span>服务记录</span>
      <span :class="{'current-line':label=='service'}"></span>
    </div>
    <div class="split-line"></div>
  </div>

  <!-- 无订单 -->
  <div class="no-record" v-show="label=='myOrder' && orderList.length==0">
    <img src="../images/no-order-record.png" class="no-order-record">
    <p>暂无订单</p>
  </div>

  <ul v-show="label=='myOrder' && orderList.length>0">
      <li v-for="item in orderList" @click="goDetail(item.orderId)">
        <order :item="item"></order>
      </li>
    </ul>

  <!-- 无服务记录 -->
  <div class="no-record" v-show="label=='service'">
    <img src="../images/no-service-record.png" class="no-service-record">
    <p>暂无服务记录</p>
  </div>

 </div>
 </div>
</template>

<script type="text/ecmascript-6">
    import weuiHeader from '../components/weuiHeader';
    import order from '../components/order';

 const SUCCESS = 200;
    export default {
      data() {
          return {
            label:'myOrder',
            orderList:[],
            nickname:'',
            header:'',
            phone:'',
            sex:0
          }
        },
        activated() {
            //调用个人信息
            this._loadUserInfo();
            //加载订单列表
            this._loadOrderList();
        },
        methods: {
           _loadOrderList(){
                const _this = this;
                const token = window.localStorage.getItem('token');
                const storeId = window.localStorage.getItem('storeId');
                this.$http({
                    method:'get',
                    url:'/fastfood/findOrderListInfo?storeId='+storeId,
                    headers: {'Authorization':'Basic '+ token }
                }).then((res) => {
                    if(res.data.code==SUCCESS){
                       if(res.data.model){
                        _this.orderList = res.data.model;
                      }
                    }
                });
            },
            _loadUserInfo(){
              const _this = this;
              const token = window.localStorage.getItem('token');
                this.$http({
                    method:'get',
                    url:'/fastfood/getUserInfo',
                    headers: {'Authorization':'Basic '+ token }
                }).then((res) => {
                    if(res.data.code==SUCCESS){
                        _this.nickname = res.data.nickname;
                        _this.header = res.data.headerUrl;
                        _this.phone = res.data.phone;
                        _this.sex = res.data.sex;

                        window.localStorage.setItem('user',JSON.stringify(res.data));
                    }
                });
            },
           goDetail(orderId){
            localStorage.setItem("parentType","myhome");
             this.$router.push({name:'orderDetail',query:{orderId:orderId}});
          },
          phoneFilter(value) {
              if(!value) return "暂无手机号";
              let _subphone = value.substring(3,7);
              return value.replace(_subphone,'****');
          },
           goMenu(){
              let token = window.localStorage.getItem('token');
              let storeId = window.localStorage.getItem('storeId');
              let tableId = window.localStorage.getItem('tableId');
              let tableName = window.localStorage.getItem('tableName');
              this.$router.push({name:'menu',query:{token:token,storeId:storeId,tableId:tableId,tableName:tableName}});
          }
        },
       components: {
          weuiHeader,
          order
       }
      
    };
</script>

<style lang="less" scoped>
  .myhome {
    padding-top:45px;
    
      .person-info {
      	height: 100px;
      	background: white;
      	padding-left: 20px;
      }

      .default-head {
      	height: 78px;
      	width: 78px;
      	vertical-align: middle;
      }

      .name-phone {
      	float: left;
      	margin-left: 20px;
      	padding-top: 30px;
      }

      .mt5{
      	margin-top: 5px;
      }

      .goto-update {
      	width: 40px;
      	height: 100%;
      	float: right;
      	position: relative;
      }

     .arrow {
      content: '';
      position: absolute;
      width: 18px;
      height: 18px;
      border: 1px solid #999;
      -webkit-transform: rotate(-135deg);
      -moz-transform: rotate(-135deg);
      -o-transform: rotate(-135deg);
      -ms-transform: rotate(-135deg);
      transform: rotate(-135deg);
      border-top: none;
      border-right: none;
      top: 40px;
      right: 25px;
    }

    .my-history {
      height: 45px;
      line-height: 45px;
      border-top: 1px solid #e8e8e8;
      border-bottom: 1px solid #e8e8e8;
      background: #fbfbfb;
      display: flex;
      position: relative;
    }

    .item-label {
      flex: 1;
      text-align: center;
      position: relative;
    }
    .split-line {
      position: absolute;
      top: 12px;
      left: 50%;
      height: 20px;
      border-right: 1px solid #dedede;
    }

    .current-line {
      display: block;
      width: 65px;
      border-bottom: 1px solid #333;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 0 auto;
    }

    .no-record {
      padding-top: 100px;
      color: #999;
      text-align: center;
      font-size: 13px;
      /*display: none;*/
    }

    .no-order-record {
      width: 52px;
      height: 58px;
      display: block;
      margin: 0 auto;
      margin-bottom: 15px;
    }

    .no-service-record {
      width: 56px;
      height: 59px;
      display: block;
      margin: 0 auto;
      margin-bottom: 15px;
    }

    .has-order {
      margin-top: 10px;
      display: none;
    }


    .order-box {
        margin-bottom: 10px;
        background: white;
      }

      .time-status {
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
      }

      .bottom-line {
        height: 100%;
        border-bottom: 1px solid #dedede;
      }

      .time-status p {
        font-size: 12px;
      }
      
     .order-content {
      padding: 12px 10px;
    }
     .left-pic {
      float: left;
      width:70px;
      height: 70px;
      overflow: hidden;
    }
    .store-logo {
      width: 70px;
      height: 70px;
    }
     .order-item {
      overflow: hidden;
      zoom: 1;
      margin-left: 85px;
    }
     .storename2 {
      font-size: 16px;
      padding-top: 10px;
      font-weight: bold;
    }
     .total-num {
      font-size: 13px;
      color: #999;
      float: left;
    }
     .total-price {
      float: right;
      font-size: 13px;
    }

    .sex {
      display:inline-block;
      width:12px;
      height:12px;
      vertical-align:middle;
      margin-left:5px;
      background:url("../images/sex.png") no-repeat;
      background-size:24px 12px;
    }

    .man {
      background-position: 0 0;
    }
    .woman {
      background-position: -12px 0;
    }

}
	
</style>